<template>
  <div class="container">
    <img
      src="../../static/icons/logo.png"
      alt="logo"
      style="width: 180px; height: 180px"
    />
    <span
      style="font-size: 40px; font-family: 'Microsoft YaHei',serif; font-weight: bold"
    >
      凤梨网盘
    </span>
    <el-input
      class="width"
      v-model="username"
      placeholder="手机/用户名/邮箱"
    ></el-input>
    <el-input
      class="width"
      v-model="passwd"
      placeholder="密码"
      type="password"
      @keyup.enter.native="login({ username, passwd })"
    ></el-input>
    <div
      class="width"
      style="text-align: end; color: cornflowerblue; font-weight: bold"
    >
      <router-link to="/register">
        <span>注册</span>
      </router-link>
      <router-link to="/forgetPasswd">
        <span>忘了密码?</span>
      </router-link>
    </div>
    <el-button
      class="width"
      type="primary"
      @click="login({ username, passwd })"
    >
      登录
    </el-button>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      passwd: ""
    };
  },
  methods: {
    ...mapActions(["login"])
  }
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  * {
    margin: 5px;
  }

  .width {
    width: 30%;
  }
}
</style>
